<template>
	<view>
		<view class="cu-form-group">
			<view class="title">预约日期</view>
			<picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="DateChange">
				<view class="picker">
					{{date}}
				</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title">到店时间</view>
			<picker mode="time" :value="time" start="09:01" end="21:01" @change="TimeChange">
				<view class="picker">
					{{time}}
				</view>
			</picker>
		</view>
		
		
			<view class="cu-form-group">
				<view class="title">预约人</view>
				<input placeholder="请输入预约人姓名" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">预约电话</view>
				<input placeholder="请输入预约电话" name="input"></input>
			</view>
			
			
			
			<view class="cu-form-group align-start">
				<view class="title">备注</view>
				<textarea maxlength="-1" :disabled="modalName!=null" @input="textareaBInput" placeholder="请输入备注信息"></textarea>
			</view>
			
			
			<view class="footer"  >立即提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				time: '12:01',
				date: '2018-12-25',
				
				textareaAValue: '',
				textareaBValue: ''
			};
		},
		methods: {
			TimeChange(e) {
				this.time = e.detail.value
			},
			DateChange(e) {
				this.date = e.detail.value
			},
			textareaAInput(e) {
				this.textareaAValue = e.detail.value
			},
			textareaBInput(e) {
				this.textareaBValue = e.detail.value
			}
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	input{
		text-align: right;
	}
	.footer{
		position: fixed;
		bottom: 20rpx;
		left:30rpx;
		right:30rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #D7B073;
		border-radius: 12rpx;
		font-size: 30rpx;
		text-align: center;
		font-family: SourceHanSansCN;
		font-weight: 400;
		color: #FFFFFF;
	}
</style>
